<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正常流</title>
    <style>
      html {
        background-color: honeydew;
      }
      body {
        /* 宽度500px， 居中*/
        /* background-color: ; */
        width: 80%;
        margin: 0 auto;
        border: 2px solid black;
        background-color: lightpink;
        line-height: 2em;
      }

      h1 {
        border: 1px solid black;
        margin: 0;
      }

      h2 {
        border: 1px solid black;
        margin: 0;
      }

      p {
        margin: 0;
        border: 2px solid red;
        background-color: rgb(200, 0, 0, 0.5);
      }
      span {
        border: 1px solid black;
        background-color: yellow;
      }
      em {
        border: 1px solid black;
        background-color: green;
      }

    </style>
  </head>
  <body>
    <h1>Normal Flow</h1>
    <h2>块元素流向</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis non
      repellendus et eveniet debitis recusandae eius soluta velit, ratione
      tempora. Doloribus quisquam ipsam molestias velit blanditiis assumenda
      sint voluptatibus vero?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis non
      repellendus et eveniet debitis recusandae eius soluta velit, ratione
      tempora. Doloribus quisquam ipsam molestias velit blanditiis assumenda
      sint voluptatibus vero?
    </p>
    <h2>内联元素流向</h2>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur explicabo nam esse enim veniam totam repudiandae debitis voluptates, quia officia tenetur, nostrum ut ipsam harum laudantium illum deserunt. Mollitia, vero?
      <span>test1</span>
      <span>test2</span>
      <span>test3</span>
      <span>test4</span>
      <span>test5</span>
      <span>test6</span>
      <span>test7</span>
      <span>test8</span>
      <span>test9</span>
      <span>test10</span>
      <span>test11</span>
      <span>test12</span>
      <span>test13</span>
      <span>test14</span>
      <span>test15</span>
      <span>test16</span>
      <span>test17</span>
      <span>test18</span>
      <span>test19</span>
      <span>test20</span>
      <span>test21</span>
      <span>test22</span>
      <span>test23</span>
      <span>test24</span>
      <span>test25</span>
      <span>test26</span>
      <span>test27</span>
      <span>test28</span>
      <span>test29</span>
      <span>test30</span>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate necessitatibus, qui repellat impedit similique a ullam quae maxime numquam explicabo sint rerum iste eos voluptatum odio ut amet repellendus! Cupiditate.
    </p>
  </body>
</html>
